<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>编辑资料</title>
    <script src="font/iconfont.js"></script>
    <style>
        h2,p,ul,body{
            padding: 0;
            margin: 0;
        }
        .title{
            display: flex;
            width: 100%;
            height: 37px;
            padding-top: 13px;
            border-bottom: 1px solid rgb(241, 241, 241);
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .title .icon_titjt{
            width: 30px;
            height: 30px;
        }
        .title h2{
            width: 100px;
            font-size: 15px;
            margin-left: 35%;
        }
        .title p{
            width: 100px;
            font-size: 15px;
            margin-left: 27%;
            font-weight: bold;
        }
        .title p>a{
            color: rgb(5, 154, 248);
        }
        .picture{
            width: 100%;
            height: 150px;
        }
        .picture img{
            width: 90px;
            height:90px;
            border-radius: 100%;
            margin-left: 38%;
            margin-top: 15px;
        }
        .xjbox{
            width: 22px;
            height: 22px;
            background-color: rgb(5, 154, 248);
            border-radius: 100%;
            position: relative;
            bottom: 25px;
            left: 220px;
        }
        .icon_xj{
            width: 15px;
            height: 15px;
            color: #fff;
            margin-left: 3px;
            margin-top: 3px;

        }
        .com{
            margin-left: 60%;
        }
        ul p{
            font-size: 15px;
        }
        .function div{
            width: 100%;
            height: 40px;
            display: flex;
            border-bottom: 1px solid rgb(223, 222, 222); 
            margin-top: 15px;   
        }
        .name1{
            color: rgb(5, 154, 248);
            margin-left: 80%;
        }
        #account{
            width: 250px;
        }
        .gend{
            margin-left: 85%;
            margin-right: -100px;
        }
        
        .quit{
            width: 92%;
            height: 40px;
            border: 1px solid red; 
            margin-top: 190px;
            margin-left: 4%;
        }
        .quit p{
            font-size: 18px;
            color: red;
            text-align: center;
            margin-top: 6px;
        }
    </style>
</head>
<body>
    <div class="title">
        <a href="./project5.html">
            <svg class="icon_titjt" aria-hidden="true">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
        </a>
        <h2>编辑</h2>       
        <p><a href="#">主页</p></a>
    </div>

    <div class="picture">
        <a href="#">
            <img src="./img/touxiang.jpg">
            <div class="xjbox">
                <svg class="icon_xj" aria-hidden="true">
                    <use xlink:href="#icon-xiangji"></use>
                </svg>
            </div>
        </a>
    </div>
    <ul class="function">
        <li>
            <a href="#">
                <div>
                    <p>姓名</p>
                    <p class="com name1">常月华</p>
                </div>
            </a>           
        </li>
        <li>
            <a href="./project8.html">
                <div>
                    <p>个性签名</p>
                    <p class="com">19001011027</p>
                </div>                
            </a>
        </li>
        <li>
            <div>
                <p>性别</p>
                <p class="com gend">男</p>
            </div>            
        </li>
        <li>
            <div>
                <p id="account">账号管理</p>
            </div>            
        </li>
    </ul>
    <a href="#">
        <div class="quit">
            <p>退出登录</p>
        </div>
    </a>

</body>
</html>